<template>
  <div>
    <!-- 使用类型断言 as HTMLInputElement 明确告诉 TypeScript $event.target 是一个 HTMLInputElement 元素 -->
    <!-- <input
      type="text"
      :value="modelValue"
      @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
    /> -->
    <input
      type="text"
      :value="modelValue"
      @input="
        emit('update:modelValue', (<HTMLInputElement>$event.target).value)
      "
    />

    <!-- 如果要使用自定义名称 qwe -->
    <!--
    <input
      type="text"
      :value="qwe"
      @input="emit('update:qwe', ($event.target as HTMLInputElement).value)"
    />
    -->
  </div>
</template>

<script setup lang="ts" name="wInput">
// 默认modelValue方式
defineProps<{ modelValue: string }>(); //defineProps(["modelValue"]);
const emit = defineEmits<{
  (e: "update:modelValue", value: string): void;
}>(); //const emit = defineEmits(["update:modelValue"]);

// 如果要使用自定义名称 qwe，需要这样定义：

// defineProps<{ qwe: string }>();
// const emit = defineEmits<{
//   (e: "update:qwe", value: string): void;
// }>();
</script>

<style scoped></style>
